<template>
  <div class="exam-list" v-loading="loading">

    <div class="exam-sections">
      <el-tabs v-model="activeTab" class="demo-tabs" @tab-change="handleTabChange">
        <el-tab-pane label="待考试" name="pending">
          <div class="exam-grid">
            <div v-if="pendingExams.length === 0" class="empty-state">
              <el-icon size="48"><Document /></el-icon>
              <p>暂无待考试</p>
            </div>
            
            <div v-for="exam in pendingExams" :key="exam.id" class="exam-card">
              <div class="exam-header">
                <h3>{{ exam.title }}</h3>
                <el-tag :type="getDifficultyType(exam.difficulty)">
                  {{ exam.difficultyText }}
                </el-tag>
              </div>
              
              <div class="exam-info">
                <p><el-icon><Document /></el-icon> {{ exam.questionCount }} 道题</p>
                <p><el-icon><Clock /></el-icon> 限时 {{ exam.duration }} 分钟</p>
                <p><el-icon><Calendar /></el-icon> 截止: {{ exam.deadline }}</p>
              </div>
              
              <div class="exam-actions">
                <el-button type="primary" @click="startExam(exam)">
                  开始考试
                </el-button>
              </div>
            </div>
          </div>
          
          <!-- 待考试分页 -->
          <div class="pagination" v-if="pendingTotal > pendingPageSize">
            <el-pagination
              v-model:current-page="pendingPage"
              v-model:page-size="pendingPageSize"
              :total="pendingTotal"
              layout="total, prev, pager, next, jumper"
              @current-change="handlePendingPageChange"
            />
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="已完成" name="completed">
          <div class="exam-grid">
            <div v-if="completedExams.length === 0" class="empty-state">
              <el-icon size="48"><Document /></el-icon>
              <p>暂无考试记录</p>
            </div>
            
            <div v-for="exam in completedExams" :key="exam.id" class="exam-card">
              <div class="exam-header">
                <h3>{{ exam.title }}</h3>
                <el-tag :type="exam.passed ? 'success' : 'danger'">
                  {{ exam.passed ? '已通过' : '未通过' }}
                </el-tag>
              </div>
              
              <div class="exam-info">
                <p><el-icon><Star /></el-icon> 得分: {{ exam.score }}/{{ exam.totalScore }}</p>
                <p><el-icon><Clock /></el-icon> 用时: {{ exam.usedTime }} 分钟</p>
                <p><el-icon><Calendar /></el-icon> 考试时间: {{ exam.examTime }}</p>
              </div>
              
              <div class="exam-actions">
                <el-button @click="viewResult(exam)">
                  查看结果
                </el-button>
                <el-button 
                  v-if="!exam.passed"
                  type="primary" 
                  @click="retakeExam(exam)"
                >
                  重新考试
                </el-button>
              </div>
            </div>
          </div>
          
          <!-- 已完成考试分页 -->
          <div class="pagination" v-if="completedTotal > completedPageSize">
            <el-pagination
              v-model:current-page="completedPage"
              v-model:page-size="completedPageSize"
              :total="completedTotal"
              layout="total, prev, pager, next, jumper"
              @current-change="handleCompletedPageChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { examApi } from '@/api/exam'
import { Document, Clock, Calendar, Star } from '@element-plus/icons-vue'

const router = useRouter()
const activeTab = ref('pending')
const loading = ref(false)

// 待考试数据
const pendingExams = ref([])
const pendingPage = ref(1)
const pendingPageSize = ref(10)
const pendingTotal = ref(0)

// 已完成考试数据
const completedExams = ref([])
const completedPage = ref(1)
const completedPageSize = ref(10)
const completedTotal = ref(0)

// 获取难度标签类型
const getDifficultyType = (difficulty) => {
  const typeMap = {
    'easy': 'success',
    'medium': 'warning',
    'hard': 'danger'
  }
  return typeMap[difficulty] || 'info'
}

// 加载待考试列表
const loadPendingExams = async () => {
  loading.value = true
  try {
    const params = {
      page: pendingPage.value,
      size: pendingPageSize.value,
      status: 'pending'
    }
    
    const data = await examApi.getExamList(params)
    pendingExams.value = data.records || data.list || data
    pendingTotal.value = data.total || data.length
  } catch (error) {
    console.error('加载待考试列表失败:', error)
    ElMessage.error('加载待考试列表失败')
  } finally {
    loading.value = false
  }
}

// 加载已完成考试列表
const loadCompletedExams = async () => {
  loading.value = true
  try {
    const params = {
      page: completedPage.value,
      size: completedPageSize.value,
      status: 'completed'
    }
    
    const data = await examApi.getExamList(params)
    completedExams.value = data.records || data.list || data
    completedTotal.value = data.total || data.length
  } catch (error) {
    console.error('加载已完成考试列表失败:', error)
    ElMessage.error('加载已完成考试列表失败')
  } finally {
    loading.value = false
  }
}

// 处理标签页切换
const handleTabChange = (tabName) => {
  if (tabName === 'pending') {
    loadPendingExams()
  } else {
    loadCompletedExams()
  }
}

// 处理待考试分页变化
const handlePendingPageChange = (page) => {
  pendingPage.value = page
  loadPendingExams()
}

// 处理已完成考试分页变化
const handleCompletedPageChange = (page) => {
  completedPage.value = page
  loadCompletedExams()
}

// 开始考试
const startExam = (exam) => {
  router.push(`/exams/${exam.id}/start`)
}

// 查看结果
const viewResult = (exam) => {
  router.push(`/exams/${exam.id}/result`)
}

// 重新考试
const retakeExam = (exam) => {
  router.push(`/exams/${exam.id}/start`)
}

onMounted(() => {
  loadPendingExams()
})
</script>

<style scoped>
.exam-list {
  padding: 20px;
  background: #f0f8ff;
  min-height: calc(100vh - 140px);
}

.exam-sections {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.exam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.exam-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s;
  background: #ffffff;
}

.exam-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.exam-header h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
}

.exam-info {
  margin-bottom: 20px;
}

.exam-info p {
  margin: 8px 0;
  color: #606266;
  display: flex;
  align-items: center;
  gap: 8px;
}

.exam-info .el-icon {
  color: #2c5aa0;
}

.exam-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #909399;
}

.empty-state .el-icon {
  margin-bottom: 16px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

@media (max-width: 768px) {
  .exam-grid {
    grid-template-columns: 1fr;
  }
}
</style>